<template>
	<view :id="componentId" class="wrap-picker">
		<!-- :style="bodyStyle" -->
		<view class="wrap-picker-body"  v-if="visible" :style="bodyStyle">
			<view class="mask" :style="bodyStyle"></view>
			<scroll-view class="scview-options" scroll-y :style="scviewStyle">
				<view class="cont-item-option">
					<view v-for="(item,idx) in optionList" :key="idx" class="item-option" @tap.stop="handleSelect(idx)">
						<view>{{item.mid_table_remark_001}}</view>
						<image v-if="idx==selectedIdx" class="icon-selected" src="/static/icon_filter_selected.png">
						</image>
					</view>

				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script setup>
	import {
		ref,
		onMounted,
		computed,
		nextTick,
		watch
	} from "vue"
	const props = defineProps({
		componentId: {
			type: String,
			default: 'custom-picker'
		},
		optionList: {
			type: Array,
			default: []
		},
		visible: {
			type: Boolean,
			default: false
		},
		selectedIdx: {
			type: Number,
			default: 0
		},
		domInfo:{
			type:Object,
			default:{}
		}
	})
	const emits=defineEmits(['update:selectedIdx','update:visible'])
	let bodyStyle=ref({})
	let scviewStyle=ref({})
	watch(() => props.domInfo, (val) => {
		let style={
			 'height':(val?.systemInfo?.screenHeight||0)-(val?.pickerDomInfo?.top||0)+'px',
		}
		scviewStyle.value=style;
		
		bodyStyle.value=Object.assign({top:(val?.pickerDomInfo?.top||0)+'px'},style)
		console.log("change>>>>>>>>>>",val?.systemInfo?.screenHeight||'erro2', val?.pickerDomInfo?.top||'error')
	})
	// let pickerTop = ref(0);
	// let screenHeight = ref(0);
	// let pickerBodyHeight = ref(0)
	// const bodyStyle = computed(() => {
	// 	// console.log(bodyStyle,)
	// 	// console.log(screenHeight.value, pickerTop.value, ">>>>>>>>>>>>>>>piccclclcc");
	// 	nextTick(()=>{
	// 		console.log(props.domInfo.value)
	// 		console.log(props.domInfo.value.pickerDomInfo,">>>>>>>>>>>>>>>>2222")
	// 	})
		
	// 	let style = {
	// 		// "height": screenHeight.value - pickerTop.value + 'px',
	// 		// "top":pickerTop.value+'px'
	// 	}
	// 	// console.log(style, ">>>>>>>>>>>>>>>>>>jkjk")
		
		
	// 	return style;
	// })

	onMounted((event) => {
		// const query = uni.createSelectorQuery().in(this);
		// const systemInfo = uni.getSystemInfoSync();
		// let tmpScreenHeight = systemInfo.windowHeight
		// screenHeight.value = tmpScreenHeight;
		// // console.log('SYStemInto', systemInfo)
		// query.select(`#${props.componentId}`).boundingClientRect((res) => {
		// 	console.log(JSON.stringify(systemInfo),">>>>system",JSON.stringify(res))
		// 	pickerTop.value = res.top;
		// 	pickerBodyHeight.value = screenHeight.value - res.top;
		// }).exec();
	})
	const handleSelect=(idx)=>{
		
		emits('update:selectedIdx',idx)
		emits('update:visible',false)
	}
</script>

<style lang="less" scoped>
	.wrap-picker {
		position: relative;
		z-index: 3;

		.wrap-picker-body {
			position: fixed;
			width: 100%;
			height: 100vh;
			top: 0;
			overflow: hidden;
			z-index: 3;

			.mask {
				position: fixed;
				width: 100%;
				height: 100%;
				bottom: 0;
				left: 0;
				background-color: rgba(16, 27, 37, 0.8);
				overflow: hidden;
			}

			.scview-options {
				position: relative;
				width: 100%;
				height: 100%;
				overflow: hidden;

				.cont-item-option {
					position: relative;
					width: 100%;
					padding-left: 32rpx;
					padding-right: 32rpx;
					box-sizing: border-box;
					background-color: rgba(24, 40, 54, 1);
				}

				.item-option {
					position: relative;
					width: 100%;
					height: 88rpx;
					display: flex;
					display: -webkit-flex;
					flex-direction: row;
					align-items: center;
					justify-content: space-between;
					border-bottom: 1px solid rgba(255, 255, 255, 0.05);

					box-sizing: border-box;
					font-size: 26rpx;
					font-family: PingFang SC;
					font-weight: 400;
					color: #FFFFFF;

					&:last-child {
						border-bottom: none;
					}

					.icon-selected {
						position: relative;
						width: 38rpx;
						height: 38rpx;
					}
				}
			}


		}
	}
</style>